import { Button, message, Avatar, Row, Col, Form, Divider, Input, Affix,Result } from 'antd'
const { TextArea } = Input
import { useEffect, useState } from 'react'
import prescriptionApi from '../api/prescription.api'
import UserApi from '../api/user.api'
import HTTP from '../services/api'
import SelfTable from '../tools/selfTable'
import UserCard from '../component/reserve/userCard'
import html2canvas from 'html2canvas'
import { history } from 'umi';




const casecloumns = [
    // {
    //     dataIndex: 'apply',
    //     title: '绑定',
    //     width: '50'
    // },
    {
        dataIndex: 'doctor_id',
        title: '看病医生id',
        width: '50'
    }, {
        dataIndex: 'student_id',
        title: '学生ID',
        width: '50'
    },
    {
        dataIndex: 'createdAt',
        title: '创建时间',
        width: '50'
    },
    {
        dataIndex: 'bigintr',
        title: '目前的情况',
        width: '50'
    },
    {
        dataIndex: 'blood_pressure',
        title: '血压',
        width: '50'
    },
    {
        dataIndex: 'breathing',
        title: '呼吸',
        width: '50'
    },
    {
        dataIndex: 'temperature',
        title: '体温  ',
        width: '50'
    }, {
        dataIndex: 'pulse',
        title: '脉搏  ',
        width: '50'
    },
    {
        dataIndex: 'case_id',
        title: '',
        width: '50'
    },
    {
        dataIndex: 'case_out',
        title: '外出治疗的病例',
        width: '50'
    },


    {
        dataIndex: 'examination_result',
        title: '检查的结果  ',
        width: '50'
    },
    {
        dataIndex: 'nurse_id',
        title: '',
        width: '50'
    },
    {
        dataIndex: 'physical_evaluation',
        title: '体格评价  ',
        width: '50'
    },
    {
        dataIndex: 'prescription_id',
        title: '处方的编号',
        width: '50'
    },

    {
        dataIndex: 'receipt',
        title: '回执  ',
        width: '50'
    },


    {
        dataIndex: 'updatedAt',
        title: '更新时间',
        width: '50'
    },
    {
        dataIndex: 'active',
        title: '操作',
        width: '50',
        render: (text, item) => <Button type="primary" shape="round" onClick={() => { getCaseByLocalId(item) }}>查看具体的病例信息</Button>
    }

]
const prescription_contentscolumns = [

    {
        title: '药品的名称',
        dataIndex: 'drug_name',
    },
    {
        title: '使用量',
        dataIndex: 'count',
    },
    {
        title: '药品的id',
        dataIndex: 'drug_id',
    },
    {
        title: '总价格',
        dataIndex: 'price',
    },
    {
        title: '备注',
        dataIndex: 'comment',
    }
]

const getCaseByLocalId = item => {
    console.log(item)
    //todo
}
// 截图加水印
const jietu = filename => {
    html2canvas(document.getElementById('prescriptionid'), {
        allowTaint: true,
        useCORS: true
    }).then(function (canvas) {
        //生成的原始canvas画布保留以备其他使用
        var img = new Image();
        const dataImg = new Image();
        var canvas1 = document.getElementById('jietu');
        // 设置宽高
        canvas1.width = canvas.width; //注意：没有单位
        canvas1.height = canvas.height; //注意：没有单位
        let x = canvas.width / 50;
        let y = canvas.height / 50;
        x += 2
        y += 2
        console.log(x, y);
        if (img.complete) {
            img.src = canvas.toDataURL(); //由于图片异步加载，一定要等img加载好，再设置src属性
            img.onload = () => {
                // 准备canvas环境
                var canvas = document.getElementById('jietu');
                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                // 绘制水印到canvas上
                for (let i = 1; i <= y; i++) {
                    let j = 0;
                    for (; j <= x; j++) {
                        ctx.font = '15px microsoft yahei';
                        ctx.font = "20pt Calibri";  //水印文字添加
                        ctx.fillStyle = "rgba(0,0,0,0.1)";
                        ctx.textAlgin = 'center'
                        ctx.fillText('这是水印', j * 300, i * 50);
                    }
                }
                dataImg.src = canvas1.toDataURL('image/png');
                const alink = document.createElement('a');
                alink.href = dataImg.src;
                alink.download = filename + '.jpg';
                alink.click();
            };
        }
    });
};
function Case() {

    const [caseInfo, setCaseInfo] = useState([])
    const [prescriptionContents, setPrescriptionContents] = useState([])
    const [studentInfo, setStudentInfo] = useState({})
    const getStudentInfoByStudentId = async studentId => {
        let result = await HTTP({ method: 'get', id: studentId }, UserApi.getStudentInfoById)
        try {
            if (result.status) {
                setStudentInfo(result.info)
            } else {
                message.error(result.msg)
            }
        } catch (error) {
            message.error('服务器异常')
        }
    }
    const getPrescriptiond = async caseid => {
        // let id = JSON.parse(localStorage.getItem('userinfo')).work_id
        console.log(caseid)
        let result = await HTTP({ method: 'get' }, prescriptionApi.getprescriptionByCaseId,{caseid})
        console.log(result)
        try {
            if (result.status) {
                setCaseInfo(result.info.case)
                await getStudentInfoByStudentId(result.info.case.student_id)
                setPrescriptionContents(result.info.count.prescription_contents)
                message.success(result.msg)
            } else {
                message.error(result.msg)
            }
        } catch (error) {
            message.error('服务器异常')

        }
    }

    useEffect(() => {
        let { caseid } = history.location.query
        getPrescriptiond(caseid)
    }, [])

    return (
        <div id='prescriptionid'>
            <Affix style={{ position: "fixed", top: '90px', right: '35px', zIndex: '1000' }} offsetTop={top}>
                <Button type="primary" onClick={() => jietu('这是截图')}>
                    截图
                </Button>
            </Affix>
             <Result
                style={{height:'200px',padding:'20px 32px'}}
                    status="success"
                    icon={<Avatar size={98} src='/logo.svg' />}
                    title="XXX学校校医院病例系统"
                    // subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
                />
            <canvas id='jietu' hidden></canvas>
            <UserCard userinfo={studentInfo} />
            <Form
                style={{ padding: '5px 20px' }}
                name="basic"
                initialValues={caseInfo}
            >
                <Divider orientation="left" plain>学生的体征</Divider>
                <Row>
                    <Col span={6}>
                        <Form.Item
                            label="体温"
                        >
                            <Input disabled />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label="脉搏"
                        >
                            <Input disabled />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label="呼吸"
                        >
                            <Input disabled defaultValue={caseInfo['breathing']} />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            label="血压"
                            name="blood_pressure"
                        >
                            <Input disabled defaultValue={caseInfo['blood_pressure']} />
                        </Form.Item>
                    </Col>

                </Row>
                <Divider orientation="left" plain>医生的描述</Divider>
                <Row>
                    <Col span='24'>
                        <Form.Item
                            label="体格评价"
                        >
                            <TextArea autoSize disabled defaultValue={caseInfo['physical_evaluation']} />
                        </Form.Item>
                    </Col>
                </Row>
                <Divider orientation="left" plain>医生的描述</Divider>
                <Row>
                    <Col span='24'>
                        <Form.Item
                            label="目前的情况"
                        >
                            <TextArea autoSize disabled defaultValue={caseInfo['bigintr']} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span='24'>
                        <Form.Item
                            label="检查结果"
                        >
                            <TextArea autoSize disabled defaultValue={caseInfo['examination_result']} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span='24'>
                        <Form.Item
                            label="回执"
                            name="receipt"
                        >
                            <TextArea autoSize disabled defaultValue={caseInfo['receipt']} />
                        </Form.Item>
                    </Col>
                </Row>
                <Divider orientation="left" plain>外出的病例</Divider>
                <Row>
                    <Col span='24'>
                        <Form.Item
                            label="外出的病例"
                        >
                            <TextArea autoSize disabled defaultValue={caseInfo['case_out']} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>

            <SelfTable columns={prescription_contentscolumns} dataSource={prescriptionContents} pagination={false} keyid='drug_id'></SelfTable>

        </div>
    )
}


export default Case